<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<script src="../vue.js"></script>
</head>

<body>
<div id="app">

 <!-- 
    Vue对对象内的所有的属性也进行了深度监听,只要属性值发生改变,也可以重新渲染
    如果在修改对象的属性时,如果出现了无法更新的现象,可以使用vm.$set()
  -->
  <button @click="person.age++">修改</button>
  <button @click="deleteAttr">删除name属性</button>
  <button @click="addAttr">新增sex属性</button>
  <p>姓名是{{person.name}}</p>
  <p>年龄是{{person.age}}</p>
  <p>性别是{{person.sex}}</p>
  </div>
  <script>
    Vue.config.productionTip=false;

    const vm =new Vue({
        el: "#app",
        data() {
            return {
                person: {
                    name:"laowang",
                    age:18,

                }
            }
        },
        methods:{
            deleteAttr() {
                //删除属性的错误写法:因为Vue没有对属性的删除行为进行监听,所以不会更新视图
                //delete person.name
                //我们需要使用Vue.delete() 或者vm.$delete()方法删除(这两个只是存放位置不同的同一个方法)
                //this.$delete(this.person,"name")
            Vue.delete(this.person,"name")
            },
        }
    })
  </script>
 </script>
</body>

</html>